<template>
    <div class="login">
        <div class="box">
            <div class="lef">
                <p>砼方云</p>
                <p>专业的系统管理平台</p>
            </div>
            <div class="rig">
                <div class="rig_box">
                    <div class="rig_box_top">
                        <div class="top_header">
                            <div class="_box_header">
                                <div class="header_img">
                                    <img src="../../assets/images/wx.png" alt lazy />
                                </div>
                                <p>扫码登录</p>
                            </div>
                            <div class="_box_code" @click="QR">
                                <img src="../../assets/images/ewm2.jpg" alt lazy />
                            </div>
                        </div>
                        <div class="top_Logo">
                            <div class="top_Logo_Img">
                                <img src="../../assets/images/Tf_nm.png" alt lazy />
                            </div>
                        </div>
                        <div class="header_text">
                            <p>账号登录</p>
                        </div>
                    </div>
                    <div class="rig_box_cen">
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                            <el-form-item prop="company">
                                <el-select v-model="ruleForm.company" placeholder="南京言午运输公司">
                                    <el-option v-for="item in options" :key="item.label" :label="item.name" :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item prop="user">
                                <el-input
                                    prefix-icon="iconfont icon-cc-user"
                                    type="text"
                                    v-model="ruleForm.user"
                                    placeholder="请输入账号"
                                />
                            </el-form-item>

                            <el-form-item prop="pass">
                                <el-input
                                    type="password"
                                    prefix-icon="iconfont icon-lock"
                                    v-model="ruleForm.pass"
                                    placeholder="请输入密码"
                                    :show-password="true"
                                />
                            </el-form-item>
                        </el-form>
                        <div class="Changebottom">
                            <el-checkbox size="small" v-model="checked" @change="remember()">记住我</el-checkbox>
                            <p @click="GoForGet">忘记密码?</p>
                        </div>
                    </div>
                    <div class="rig_box_bot">
                        <div class="ChangeFooter">
                            <div class="Btn">
                                <el-button :plain="true" @click="submitForm('ruleForm')">登陆</el-button>
                            </div>
                            <div class="reg">
                                <el-button @click="GoReg()">立即注册</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { setCookie, getCookie, clearCookie } from "@/components/Cookie.js";
// import Vie from "@/components/View.vue";
// import { aLogin } from "@/api/api";
export default {
    name: 'login',
    data() {
        var validateuser = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            } else {
                callback();
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        var validateCompany = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请选择公司'));
            } else {
                callback();
            }
        };
        return {
            checked: false,
            ruleForm: {
                pass: '',
                user: '',
                company: ''
            },
            rules: {
                company: [
                    {
                        validator: validateCompany,
                        trigger: 'blur'
                    }
                ],
                user: [
                    {
                        validator: validateuser,
                        trigger: 'blur'
                    }
                ],
                pass: [
                    {
                        validator: validatePass,
                        trigger: 'blur'
                    }
                ]
            },
            options: [
                {
                    label: '11',
                    name: '南京言午运输公司'
                }
            ]
        };
    },
    created() {
        var lett = this;
        document.onkeydown = (e) => {
            var key = window.event.keyCode;
            if (key == 13) {
                this.submitForm('ruleForm');
            }
        };
        this.CheckCookeInfo();
    },
    methods: {
        //判断cookie是否有值

        CheckCookeInfo() {
            // if (document.cookie != '') {
            //     let str = document.cookie;
            //     str = str.replace(/\s*/g, '');
            //     let Arr = str.split(';');
            //     let obj = {};
            //     Arr.forEach((v, i) => {
            //         obj[v.split('=')[0]] = v.split('=')[1];
            //     });
            //     this.checked = true;
            //     this.ruleForm.user = obj.userName;
            //     this.ruleForm.pass = obj.userPwd;
            // }
        },
        //点击记住我
        remember() {
            // if (this.checked) {
            //     setCookie(this.ruleForm.user, this.ruleForm.pass, 1);
            // }
        },
        //二维码登录
        QR() {
            this.$router.push('/QR');
        },
        //去注册
        GoReg() {
            this.$router.push('/Reg');
        },
        //去忘记密码
        GoForGet() {
            this.$router.push('/Forget');
        },
        //点击确定
        submitForm(formName) {
            console.log(formName);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // let data = {
                    //     userName: this.ruleForm.user,
                    //     password: this.ruleForm.pass
                    // };
                    localStorage.setItem('User', this.ruleForm.user);
                    this.$router.push('/Views');
                } else {
                    return false;
                }
            });
        }
        // submitForm(valid) {
        //     localStorage.setItem('User', this.ruleForm.user);
        //     this.$router.push('/Views');
        //     // this.$refs.login.validate((valid) => {
        //     //     if (valid) {
        //     //         this.$message.success('登录成功');

        //     //     } else {
        //     //         this.$message.error('请输入账号和密码');
        //     //         console.log('error submit!!');
        //     //         return false;
        //     //     }
        //     // });
        // }
    },
    mounted() {},
    components: {
        // Vie,
    }
};
</script>
<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/new_bj.jpg') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 100%;
        height: 100%;
        display: flex;

        .lef {
            flex: 1;
            padding: 15rem 0 0 20rem;
            box-sizing: border-box;

            p {
                width: 100%;
                font-size: 3rem;
                font-weight: 400;
                color: rgba(254, 254, 254, 1);
                margin-top: 3.5rem;
                letter-spacing: 1.2rem;
            }
        }

        .rig {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .rig_box {
                width: 28.5rem;
                height: 40.17rem;
                background: rgba(255, 255, 255, 1);
                border-radius: 0.6rem;

                .rig_box_top {
                    width: 100%;
                    .top_header {
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;

                        ._box_header {
                            width: 10.44rem;
                            height: 2.61rem;
                            border: 1px solid rgba(238, 238, 238, 1);
                            border-radius: 0rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-top: 0.4rem;
                            margin-right: 1rem;
                            .header_img {
                                width: 1.3rem;
                                height: 1.3rem;
                                margin-right: 0.7rem;

                                img {
                                    width: 100%;
                                    height: auto;
                                    display: block;
                                }
                            }
                        }

                        ._box_code {
                            width: 2.5rem;
                            height: 2.5rem;
                            cursor: pointer;
                            img {
                                width: 100%;
                                height: auto;
                                display: block;
                            }
                        }
                    }

                    .top_Logo {
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        margin: 1.8rem 0 1.5rem;

                        .top_Logo_Img {
                            width: 14.83rem;
                            height: 3.33rem;

                            img {
                                width: 100%;
                                height: auto;
                                display: block;
                            }
                        }
                    }

                    .header_text {
                        width: 100%;
                        display: flex;
                        justify-content: center;

                        p {
                            width: 8rem;
                            height: 1.7rem;
                            font-size: 1.8rem;
                            font-weight: 400;
                            color: #133173;
                            line-height: 1.25rem;
                            letter-spacing: 0.2rem;
                        }
                    }
                }

                .rig_box_cen {
                    flex: 1;
                    form {
                        width: 100%;
                        margin-top: 3rem;
                        .el-form-item {
                            padding: 0 5.3rem;
                            box-sizing: border-box;
                        }

                        .el-form-item__content {
                            .iconfont {
                                margin: 0 0.8rem 0 1.8rem;
                            }
                            input {
                                width: 100%;
                                border-radius: 0;
                                border: 0;
                                border: 0.2rem solid #eee;
                                border-radius: 1.73rem;
                                box-shadow: 0;
                                text-indent: 1em;
                                border-radius: 3rem;
                            }
                            .el-select {
                                width: 100%;
                            }
                        }
                    }

                    .Changebottom {
                        width: 100%;
                        font-size: 1.1rem;
                        color: #999999;
                        display: flex;
                        padding: 22px 5.3rem;
                        box-sizing: border-box;
                        justify-content: space-between;
                        margin-top: -1rem;

                        .el-checkbox__label {
                            font-size: 1.1rem;
                            color: #999999;
                        }

                        > p {
                            font-size: 1.1rem;
                            color: #999999;
                            cursor: pointer;
                        }
                    }
                }

                .rig_box_bot {
                    .ChangeFooter {
                        width: 100%;
                        margin-top: 1.5rem;
                        padding: 0 5.3rem;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .Btn {
                            width: 17.3rem;
                            margin-top: 0.9rem;

                            .el-button {
                                width: 100%;
                                letter-spacing: 0.4rem;
                                color: #fff;
                                background: #133173;
                                border-radius: 2rem;
                            }
                        }

                        .reg {
                            width: 17.3rem;
                            margin-top: 0.9rem;

                            .el-button {
                                width: 100%;
                                letter-spacing: 0.4rem;
                                background: rgba(255, 255, 255, 1);
                                border: 0.2rem solid rgba(19, 49, 115, 1);
                                border-radius: 2rem;
                                color: #133173;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>









